<template>
  <div class="wrap">
    <myHead title="配送中"></myHead>
    <div class="allmap-wrap">
      <div id="allmap"></div>
    </div>
    <div class="box_del">
      <div class="boxtit">
        <span>商家已接单</span>
        <img src="../../../static/img/youjiantou-111.png" alt="">
      </div>
      <div class="boxtime">
        <img src="../../../static/img/naozhong.png" alt="">
        <p>预计送达 <span>12:42</span></p>
      </div>
    </div>
    <div class="lq">
      <div class="item">
        <div class="info">
          <div class="infohead">
            <img src="../../../static/img/uhead.jpg" alt="">
            <p>爱吃美食小天地</p>
            <img src="../../../static/img/youjiantou003.png" alt="">
          </div>
          <div class="box">
            <img src="../../../static/img/tianquan.png" alt="">
            <div class="boxname">
              <div class="boxh">
                <div>
                  <img src="../../../static/img/zhe_1.png" alt="">
                  <p>甜甜圈闺蜜套餐</p>
                </div>
                <p>￥5.9</p>
              </div>
              <p><span>x</span>1</p>
            </div>
          </div>
          <div class="box">
            <img src="../../../static/img/tianquan.png" alt="">
            <div class="boxname">
              <div class="boxh">
                <div>
                  <img src="../../../static/img/zhe_1.png" alt="">
                  <p>甜甜圈闺蜜套餐</p>
                </div>
                <p>￥5.9</p>
              </div>
              <p><span>x</span>1</p>
            </div>
          </div>
          <div class="box">
            <img src="../../../static/img/tianquan.png" alt="">
            <div class="boxname">
              <div class="boxh">
                <div>
                  <img src="../../../static/img/zhe_1.png" alt="">
                  <p>甜甜圈闺蜜套餐</p>
                </div>
                <p>￥5.9</p>
              </div>
              <p><span>x</span>1</p>
            </div>
          </div>
          <el-collapse-transition>
            <div v-show="showInfo1">
              <div class="transition-box">
                <div class="box">
                  <img src="../../../static/img/tianquan.png" alt="">
                  <div class="boxname">
                    <div class="boxh">
                      <div>
                        <img src="../../../static/img/zhe_1.png" alt="">
                        <p>甜甜圈闺蜜套餐</p>
                      </div>
                      <p>￥5.9</p>
                    </div>
                    <p><span>x</span>1</p>
                  </div>
                </div>
                <div class="box">
                  <img src="../../../static/img/tianquan.png" alt="">
                  <div class="boxname">
                    <div class="boxh">
                      <div>
                        <img src="../../../static/img/zhe_1.png" alt="">
                        <p>甜甜圈闺蜜套餐</p>
                      </div>
                      <p>￥5.9</p>
                    </div>
                    <p><span>x</span>1</p>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-transition>
          <p @click="showInfo1 = !showInfo1" class="xjt"><img :src="showInfo1?'../../static/img/sjt111.png':'../../static/img/xiajiantou11.png'" alt=""><span>{{showInfo1?'收起':'展开更多'}}</span></p>
        </div>
        <div class="money">
          <p><span>包装费</span><span>￥4.9</span></p>
          <p><span>配送费</span><span>￥5.5</span></p>
          <p><span>放心吃（商家赠送）</span><span>￥0</span></p>
          <p><span>优惠券</span><span style="color: #FF7004">4元商家卷</span></p>
        </div>
        <div class="zongji">
          <p>总计￥60&nbsp;优惠0.85</p>
          <p>实付<span>￥39</span></p>
        </div>
        <div class="btn">
          <div @click="call('17391751754')">
            <img src="../../../static/img/dianhua111.png" alt=""><span>联系商家</span>
          </div>
        </div>
      </div>
      <div class="psmsg">
        <p class="psmsg-tit">配送信息</p>
        <div class="psweizhi">
          <div>
            <img src="../../../static/img/psdingwei.png" alt="">
            <span>西安市雁塔区兰溪合小区05号楼201室</span>
          </div>
          <p>
            <span>曹（先生）130****5555</span>
          </p>
        </div>
        <div class="pssongda">
          <div>
            <img src="../../../static/img/psshijian.png" alt=""><p>立即送达 <span>（预计10:11）</span></p>
          </div>
          <p>配送员 <span>（暂无）</span> <img src="../../../static/img/rxdh.png" alt="" class="psTell" @click="call('17391751754')"></p>
          <p>备注 <span>（无）</span></p>
        </div>
      </div>
      <div class="ddmsg">
        <div class="ddtit">订单信息</div>
        <div class="ddbox">
          <span>订单号码</span>
          <div>8261 7581 1678 84166 <p @click="copy(tel)">复制</p></div>
        </div>
        <div class="ddbox">
          <span>订单号码</span>
          <p>2020-04-08 12：46：26</p>
        </div>
        <div class="ddbox">
          <span>订单号码</span>
          <p>在线支付</p>
        </div>
      </div>
    </div>
    <textarea id="input" style="width: 0;height: 0;opacity: 0"></textarea>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "deliveryDetails",
    components:{
      myHead
    },
    data() {
      return {
        activeNames: ['0'],
        showInfo1:false,
        tel:17391751754,
        lat:34.259430, // 纬度
        lng:108.947040, // 经度
      }
    },
    mounted() {
      let vThis = this;
      // 获取当前详细位置信息
      new BMap.Geolocation().getCurrentPosition(
              function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                  //通过Geolocation类的getStatus()可以判断是否成功定位。
                  console.info(r.point);
                  vThis.lat = r.point.lat;
                  vThis.lng = r.point.lng;
                }
              },
              {enableHighAccuracy: true}
      );
      var points = [new BMap.Point(116.3786889372559,39.90762965106183),
        new BMap.Point(116.38632786853032,39.90795884517671),
      ];

      //地图初始化
      var bm = new BMap.Map("allmap");
      bm.centerAndZoom(new BMap.Point(vThis.lng,vThis.lat), 16);

      //坐标转换完之后的回调函数
      var translateCallback = function (data){
        if(data.status === 0) {
          for (var i = 0; i < data.points.length; i++) {
            bm.addOverlay(new BMap.Marker(data.points[i]));
            bm.setCenter(data.points[i]);
          }
        }
      };
      setTimeout(function(){
        var convertor = new BMap.Convertor();
        convertor.translate(points, 1, 5, translateCallback)
      }, 1000);
    },
    methods:{
      handleChange(val) {
        console.log(val);
      },
      call(phone){
        // 调用拨号功能
        window.location.href = 'tel://' + phone;
      },
      copy(tel){
        var input = document.getElementById("input");
        input.value = tel; // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert('复制成功')
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #ffffff;
    padding: 4rem 0 0;
  }
  .amap-page-container {
    height: 5rem;
    position: absolute;
    width: 100%;
    top: -.9rem;
  }
  >>> .amap-copyright {
    z-index: 0;
  }
  /deep/ .amap-info-contentContainer {
    width:1.46rem;
    height:.52rem;
  }
  /deep/ .amap-info-content {
    background:rgba(255,255,255,1);
    box-shadow:0 .01rem .05rem 0 rgba(4,0,0,0.16);
    border-radius:.2rem;
    padding: .05rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  /deep/ .amap-logo,.amap-copyright {
    display: none !important;
    visibility:hidden;
  }
  /deep/ .amap-info-close {
    display: none !important;
  }
  /deep/ .uhead {
    width: .35rem;
    height: .35rem;
    border-radius: 100%;
    margin-right: .1rem;
  }
  >>> .msg {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #171717;
  }
  .box_del {
    width:3.34rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .03rem .15rem 0 rgba(4,0,0,0.15);
    border-radius:.08rem;
    position: absolute;
    top: 3rem;
    left: calc(50% - 1.67rem);
    z-index: 900;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .boxtit {
    width: 100%;
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .boxtit>span {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    letter-spacing: .02rem;
  }
  .boxtit>img {
    width: .08rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .boxtime {
    width: 100%;
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .boxtime>img {
    width: .2rem;
    height: .2rem;
    margin-right: .1rem;
  }
  .boxtime>p {
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
  }
  .boxtime>p>span {
    color: #FF7207;
  }
  .boxbtn {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    height: .4rem;
  }
  .boxbtn>p {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:400;
    text-align: center;
    line-height: .33rem;
  }
  .boxbtn>p:nth-child(1) {
    width:1rem;
    height:.33rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
    border-radius:.16rem;
    color: #ffffff;
  }
  .boxbtn>p:nth-child(2) {
    width:1rem;
    height:.33rem;
    box-sizing: border-box;
    border:.01rem solid rgba(229,229,229,1);
    border-radius:.16rem;
    color: #565656;
    margin-left: .2rem;
  }

  .lq {
    position: relative;
    top: -.37rem;
    z-index: 9;
  }
  .item {
    width: 3.34rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .03rem .15rem 0 rgba(4,0,0,0.15);
    border-radius:.08rem;
    margin: .1rem auto;
    z-index: 9;
  }

  .info {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .2rem;
  }
  .infohead {
    display: flex;
    flex-flow: row;
    align-items: center;
    border-bottom: .01rem solid #EEEEEE;
    padding-bottom: .15rem;
  }
  .infohead>img:nth-child(1) {
    width: .37rem;
    height: .37rem;
    border-radius: 100%;
    margin-right: .15rem;
  }
  .infohead>img:nth-child(3) {
    width: .09rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .infohead>p {
    max-width: 2.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #171717;
  }

  .box {
    width: 100%;
    height: .5rem;
    margin: .1rem auto;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
  }
  .boxname {
    width: calc(100% - .6rem);
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .boxname>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
    padding-left: .05rem;
  }
  .boxname>p:nth-child(2)>span {
    font-size: .12rem;
  }
  .boxh {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-right: .3rem;
  }
  .boxh>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .boxh>div>p {
    max-width: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
  }
  .box>img:nth-child(1) {
    width: .5rem;
    height: .5rem;
    margin-right: .1rem;
  }
  .boxh>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .boxh>div>img {
    width: .16rem;
    height: .16rem;
    margin-right: .1rem;
  }

  /deep/ .el-collapse-item__header {
    justify-content: center !important;
    color: #666666 !important;
  }
  /deep/ .el-collapse-item__arrow {
    margin: 0;
    /*transform: rotate(-90deg) !important;*/
  }

  .money {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .2rem;
  }
  .money>p:nth-last-child(1) {
    border-bottom: .01rem solid #EEEEEE;
  }
  .money>p {
    height: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 .3rem 0 .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .zongji {
    /*padding: .2rem 0;*/
    width: 100%;
    box-sizing: border-box;
    padding:.1rem .4rem;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .zongji>p:nth-child(1) {
    font-size:.15rem;
    color: #999999;
    font-family:PingFang SC;
    font-weight:500;
  }
  .zongji>p:nth-child(2) {
    margin-left: .1rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .zongji>p:nth-child(2)>span {
    font-size:.24rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #EF5D4E;
  }
  .btn {
    width: 100%;
    height: .65rem;
    box-sizing: border-box;
    padding:0 .2rem;
  }
  .btn>div {
    width: 100%;
    height: 100%;
    border-top: .01rem solid #EEEEEE;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
  }
  .btn>div>span {
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #171717;
  }
  .btn>div>img {
    width: .23rem;
    height: .28rem;
    margin-right: .15rem;
  }
  .btn>div>p {
    width:1.08rem;
    height:.35rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
    border-radius:.17rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:500;
    color: #ffffff;
  }

  .psmsg {
    width:3.34rem;
    min-height: 2.7rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .03rem .15rem 0 rgba(4,0,0,0.15);
    border-radius:.08rem;
    margin: .1rem auto;
    box-sizing: border-box;
    padding: 0 .2rem;
  }
  .psmsg-tit {
    width: 100%;
    height: .5rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #1D1D1D;
    line-height: .5rem;
    border-bottom: .01rem solid #F9F9F9;
  }
  .psweizhi {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    border-bottom: .01rem solid #F9F9F9;
  }
  .psweizhi>p {
    padding-left: .3rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .psweizhi>div>span {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
  }
  .psweizhi>div>img,.pssongda>div>img {
    width: .16rem;
    height: .16rem;
    margin-right: .1rem;
  }
  .psTell {
    width: .3rem;
    height: .3rem;
    position: absolute;
    right: 0;
    top: calc(50% - .15rem);
  }
  .pssongda>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .psweizhi {
    margin-bottom: .15rem;
  }
  .psmsg-tit {
    margin-bottom: .1rem;
  }
  .pssongda>div>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
    margin-left: .03rem;
  }
  .pssongda>div>p>span {
    color: #999999;
  }
  .pssongda>p {
    padding-left: .3rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
    position: relative;
  }
  .pssongda>p>span {
    color: #999999;
  }
  .pssongda>p,.pssongda>div {
    margin-bottom: .25rem;
  }

  .ddmsg {
    width:3.34rem;
    min-height: 1.8rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .03rem .15rem 0 rgba(4,0,0,0.15);
    border-radius:.08rem;
    margin: .1rem auto;
    box-sizing: border-box;
    padding: 0 .2rem;
  }
  .ddtit {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #1D1D1D;
    height: .5rem;
    line-height: .5rem;
  }
  .ddbox {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    height: .4rem;
  }
  .ddbox>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .ddbox>div>p {
    padding: .02rem .05rem;
    background-color: #F5F5F5;
    border:.01rem solid rgba(153,153,153,1);
    border-radius:.03rem;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
    outline: none;
    margin-left: .05rem;
  }
  .ddbox>div {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .xjt {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .xjt>img {
    width: .12rem;
    height: .07rem;
    margin-right: .1rem;
  }
  .xjt>span {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #C0C0C0;
  }

  .transition-box>div:nth-last-child(1) {
    margin: 0;
  }
  .transition-box>div:nth-child(1) {
    margin-top: 0;
  }

  /*  弹窗适配*/
  >>> .el-notification {
    width: 3.3rem;
    padding: .14rem .26rem .14rem .13rem;
    box-shadow: 0 .02rem .12rem 0 rgba(0,0,0,.1);
    border: .01rem solid #EBEEF5;
  }
  >>> .el-notification__icon {
    height: .24rem;
    width: .24rem;
    font-size: .24rem;
  }
  >>> .el-notification__group {
    margin-left: .13rem;
    margin-right: .08rem;
  }
  >>> .el-notification__title {
    font-size: .16rem;
    line-height: .2rem;
  }
  >>> .el-notification__closeBtn {
    top: .18rem;
    right: .15rem;
    font-size: .16rem;
  }

  .allmap-wrap {
    width: 100%;
    height: 4rem;
    box-sizing: border-box;
    padding-top: .5rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #allmap {
    height: 100%;
  }
</style>
